<div th:fragment="control_chart_axisLine">
    <script type="text/javascript">
        // 示例数据
        var get_line_option = function () {
            return {
                "tooltip": {
                    "trigger": "axis",
                },
                "legend": {
                    "x": "center",
                    "itemWidth": 7,
                    "itemHeight": 10,
                    "textStyle": {
                        "color": "#888",
                        "fontSize": 12
                    },
                    "data": []
                },
                "grid": [{
                    "show": false,
                    "top": 50,
                    "bottom": 90,
                    "left": 50,
                    "right": 65,
                    "containLabel": false
                }],
                "color": ["#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0"],
                "xAxis": [{
                    show: true,
                    "boundaryGap": true,
                    "name": "x轴",
                    "axisLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitLine": {
                        "show": false
                    },
                    "axisLabel": {
                        "rotate": -30,
                        "interval": 0,
                        "formatter": 0,
                        "textStyle": {
                            "color": "#777777",
                            "fontSize": 12
                        }
                    },
                    "data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                }, {
                    show: false,
                    "boundaryGap": true,
                    "name": "x轴",
                    "axisLine": {
                        "onZero": false,
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitLine": {
                        "show": false
                    },
                    "axisLabel": {
                        "rotate": -30,
                        "interval": 0,
                        "formatter": 0,
                        "textStyle": {
                            "color": "#777777",
                            "fontSize": 12
                        }
                    },
                    "data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                }],
                "yAxis": [{
                    show: true,
                    "type": "value",
                    "name": "y轴",
                    "boundaryGap": false,
                    "axisLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitLine": {
                        "show": true,
                        "lineStyle": {
                            "color": "#8e8e8e",
                            "width": 1,
                            "type": "solid"
                        }
                    },
                    "axisLabel": {
                        "rotate": -30,
                        "formatter": 0,
                        "textStyle": {
                            "color": "#777777",
                            "fontSize": 12
                        }
                    }
                }, {
                    show: false,
                    "type": "value",
                    "name": "y轴",
                    "boundaryGap": false,
                    "axisLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitLine": {
                        "show": true,
                        "lineStyle": {
                            "color": "#8e8e8e",
                            "width": 1,
                            "type": "solid"
                        }
                    },
                    "axisLabel": {
                        "rotate": -30,
                        "formatter": 0,
                        "textStyle": {
                            "color": "#777777",
                            "fontSize": 12
                        }
                    }
                }],
                "series": [],
                type:"axisLine"
            };
        }
        function metadata_axisLine(params) {
            var series = {
                "name": "系列一",
                "type": "line",
                "column": "SUMVALUE",
                "symbol": "emptyCircle",
                "symbolSize": 5,
                "itemStyle": {
                    "normal": {
                        "shadowColor": "blue",
                        "shadowBlur": 0
                    }
                },
                "lineStyle": {
                    "normal": {
                        "borderColor": "red",
                        "width": 1
                    }
                },
                xAxisIndex: 0,
                yAxisIndex: 0,
                "data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            };
            var legendData = {
                "name": "系列一",
                "icon": "line"
            };
            var opt = get_line_option();// 每个视图创建新的option，防止相互污染
            opt.series.push(series);
            opt.legend.data.push(legendData);
            params = $.extend({}, {
                GRID: {},
                X_Y_AXIS: {
                    x1: {
                        showName: "X1轴",
                        isShow: "0",
                        name: "x1",
                        rotate: 0,
                        interval: 1,
                        formatter: "0",
                        column: "NAME"
                    },
                    x2: {
                        showName: "X2轴",
                        isShow: "0",
                        name: "x2",
                        rotate: 0,
                        interval: 1,
                        formatter: "0",
                        column: "NAME2"
                    },
                    y1: {
                        showName: "Y1轴",
                        isShow: "0",
                        name: "y1",
                        rotate: 0,
                        interval: 1,
                        formatter: "0",
                        column: "NAME"
                    },
                    y2: {
                        showName: "Y2轴",
                        isShow: "0",
                        name: "y2",
                        rotate: 0,
                        interval: 1,
                        formatter: "0",
                        column: "NAME2"
                    }
                },
                DATASET: {
                    series: series,
                    legend: legendData
                },
                OPTION: opt
            }, params);
            return $.extend(new metadata_chart_common(params), this);
        }

        function metadata_view_axisLine(control) {
            var resToOpt = new resToOption();
            this.DATASET = function () {
                var view = $($("#DATASET").html());
                var _this = this;
                var option = this.control.getMetadata("OPTION");
                var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
                var legendData = $.extend({}, this.control.getMetadata("DATASET").legend);
                var series = option.series, sql = option.sql;

                var setDataSetDetail = function (s) {
                    var ran = Math.random() * 1000;
                    ran = parseInt(ran);
                    var name = s.name, type = s.type, column = s.column, stack = s.stack;
                    var xAxisIndex = s.xAxisIndex || 0, yAxisIndex = s.yAxisIndex || 0;
                    stack = stack == "STACK" ? stack + ran : stack;
                    var detail_view = $($("#DATASET_DETAIL_XX_YY").html());
                    detail_view.find("input[name=title]").val(name);
                    detail_view.find("select[name=series]").val(type);
                    detail_view.find("input[name=column]").val(column);
                    detail_view.find("input[name=stack]").val(stack);
                    detail_view.find("select[name=xAxisIndex]").val(xAxisIndex);
                    detail_view.find("select[name=yAxisIndex]").val(yAxisIndex);
                    return detail_view;
                };
                var getDataSetDeatil = function () {
                    option.sql = $(view).find("textarea").val();
                    $(view).find(".dataset_detail").each(function (i, item) {
                        var n = $(item).find("input[name=title]").val();
                        var c = $(item).find("input[name=column]").val();
                        var s = $(item).find("input[name=stack]").val();
                        var t = $(item).find("select[name=series]").val();
                        var x = $(item).find("select[name=xAxisIndex]").val();
                        var y = $(item).find("select[name=yAxisIndex]").val();
                        $.extend(option.series[i], {
                            name: n,
                            column: c,
                            type: t,
                            stack: s,
                            xAxisIndex: x,
                            yAxisIndex: y
                        });
                        $.extend(option.legend.data[i], {
                            name: n
                        });
                    });
                };

                $(view).find("textarea").val(sql);
                for (var i in series) {
                    $(view).append(setDataSetDetail(series[i]));
                }
                //增加按钮
                view.find(".add-btn").click(function () {
                    var p = $.extend({}, seriesData);
                    option.series.push(p);
                    option.legend.data.push($.extend({}, legendData));
                    $(view).append(setDataSetDetail(p));
                    _this.linkViewOption(option);
                });
                //系列名、字段名
                view.on("keyup", "input,textarea", function () {
                    getDataSetDeatil();
                    _this.linkViewOption(option);
                });
                view.on("focus", "input,textarea", function () {
                    $(this).popover("show");
                });

                view.on("blur", "input,textarea", function () {
                    $(this).popover("hide");
                });
                //系列类型
                view.on("change", "select", function () {
                    getDataSetDeatil();
                    _this.linkViewOption(option);
                });
                //SQL执行按钮
                view.on("click", ".sql-btn", function () {
                    var sql = $(view).find("textarea").val();
                    queryChartBySql(sql, "line", function (result) {
                        try {
                            result.type = option.type;
                            option = resToOpt.getOption(result, option);
                            _this.linkViewOption(option);
                        } catch (e) {
                            console.error(e);
                        }
                    });
                });
                //删除按钮
                view.on("click", ".delete-btn", function () {
                    var index = $(this).index(".delete-btn");
                    option.series.splice(index, 1);
                    option.legend.data.splice(index, 1);
                    $(this).parents(".dataset_detail").remove();
                    _this.linkViewOption(option);
                });
                $(this.settingPanel).append(view);
            };
            this.X_Y_AXIS = function () {
                var view = $($("#XX_YY_AXIS").html());
                var metadata = this.control.getMetadata();
                var _this = this;
                var option = metadata["OPTION"];
                var x_y_axis = metadata["X_Y_AXIS"];
                var getAxis = function (index) {
                    switch (index) {
                        case "x1":
                        case "0":
                            return option.xAxis[0];
                        case "x2":
                        case "1":
                            return option.xAxis[1];
                        case "y1":
                        case "2":
                            return option.yAxis[0];
                        case "y2":
                        case "3":
                            return option.yAxis[1];
                    }
                };

                for (var key in x_y_axis) {
                    var value = x_y_axis[key];
                    var axis = getAxis(key);
                    if (axis) {
                        value.name = axis.name;
                        value.rotate = axis.axisLabel.rotate;
                        value.interval = axis.axisLabel.interval;
                        value.isShow = axis.show ? "1" : "0";
                    }
                    var tr = $($("#XX_YY_AXIS_TR").html());
                    tr.children("td:first").html(key + "轴");
                    tr.find("select[name=interval]").val(value.interval || "1");
                    tr.find("select[name=isShow]").val(value.isShow || "0");
                    tr.find("input[name=name]").val(value.name);
                    tr.find("input[name=rotate]").val(value.rotate);
                    tr.find("input[name=formatter]").val(value.formatter);
                    tr.find("input[name=column]").val(value.column);
                    view.append(tr);
                }
                view.on("keyup change", "input[name],select[name]", function () {
                    var name = $(this).attr("name");
                    var val = $(this).val();
                    var index = $("input[name=" + name + "]").add("select[name=" + name + "]").index($(this));
                    var axis = getAxis(index + "");
                    if (name == "name") {
                        axis[name] = val;
                    } else if (name == "isShow") {
                        axis.show = val == 1;
                    } else if (name == "interval") {
                        axis.axisLabel[name] = val == "1" ? "auto" : "0";
                    } else if (name == "rotate") {
                        axis.axisLabel[name] = val;
                    } else if (name == "formatter") {
                        axis.axisLabel.formatter = function (value) {
                            var ret = "";//拼接加\n返回的类目项
                            var maxLength = val || 0;
                            maxLength = parseFloat(maxLength);
                            if (maxLength && maxLength > 0) {
                                var valLength = value.length;//X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1) {
                                    var temp = "";//每次截取的字符串
                                    var start = 0;//开始截取的位置
                                    var end = start + maxLength;//结束截取的位置
                                    temp = value.substring(start, end) + "...";
                                    ret += temp; //凭借最终的字符串
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            } else {
                                return value;
                            }
                        };
                    }
                    _this.linkViewOption(option);
                });


                $(this.settingPanel).append(view);
            };
            return $.extend(new metadata_view_chart_common(control), this);
        }

        function metadata_form_view_axisLine(control) {
            return $.extend(new metadata_form_view_chart_common(control), this);
        }
    </script>

    <!-- 控制面板 图表 X/Y轴单位 -->
    <script type="text/html" id="XX_YY_AXIS">
        <div class="form-setting-group">
            <table class="setting-control-table">
                <tr class="setting-control-title">
                    <td colspan="13">坐标轴设置</td>
                </tr>
            </table>
        </div>
    </script>
    <!-- 控制面板 图表 X/Y轴行设置 -->
    <script type="text/html" id="XX_YY_AXIS_TR">
        <tr>
            <td class="setting-control-label"></td>
            <td class="setting-control-label">是否显示</td>
            <td>
                <select name="isShow" class="form-control" style="width:100px;" data-content="是否显示该坐标轴"
                        data-trigger="manual">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </td>
            <td class="setting-control-label">单位</td>
            <td><input name="name" class="form-control" data-content="更换坐标轴轴的单位名称" data-trigger="manual"
                       data-placement="top"></td>
            <td class="setting-control-label100">项目类角度</td>
            <td><input name="rotate" class="form-control" data-content="项目类的倾斜角度" data-trigger="manual"
                       data-placement="top"></td>
            <td class="setting-control-label100">项目类显示</td>
            <td>
                <select name="interval" class="form-control" style="width:120px;" data-content="项目类显示类型"
                        data-trigger="manual">
                    <option value="1">自适应显示</option>
                    <option value="0">全部显示</option>
                </select>
            </td>
            <td class="setting-control-label100">项目类长度</td>
            <td>
                <input name="formatter" class="form-control">
            </td>
            <td class="setting-control-label100">字段别名</td>
            <td>
                <input name="column" class="form-control" readonly>
            </td>
        </tr>
    </script>

    <!-- 控制面板 图表 dataSet基本配置 -->
    <script type="text/html" id="DATASET">
        <div class="form-setting-group">
            <table class="setting-control-table">
                <tr class="setting-control-title">
                    <td colspan="2">dataSea配置</td>
                </tr>
                <tr>
                    <td colspan="2"><textarea class='form-control' placeholder="请配置SQL语句"></textarea></td>
                </tr>
                <tr>
                    <td class="setting-control-form2"><a href="javascript:;" class="btn btn-default btn-sm sql-btn">执行SQL</a>
                    </td>
                    <td><a href="javascript:;" class="btn btn-default btn-sm add-btn">增加dataSea</a></td>
                </tr>
            </table>
        </div>
    </script>
    <!-- 控制面板 图表 dataSet详细配置 -->
    <script type="text/html" id="DATASET_DETAIL_XX_YY">
        <div class="dataset_detail">
            <table class="setting-control-table">
                <tr>
                    <td class="setting-control-label">名称</td>
                    <td><input name="title" class="form-control" data-content="图表名称" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">字段</td>
                    <td><input name="column" class="form-control" data-content="配置SQL的字段名称" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">系列</td>
                    <td><input name="stack" class="form-control" data-content="图例分类，相同分类的柱子将会堆叠" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">分类</td>
                    <td>
                        <select name="series" class="form-control" style="width:100px;" data-content="图例分类，相同分类的柱子将会堆叠"
                                data-trigger="manual"
                                data-placement="bottom">
                            <option value="bar">柱形图</option>
                            <option value="line">线形图</option>
                        </select>
                    </td>
                    <td class="setting-control-label">使用X轴</td>
                    <td>
                        <select name="xAxisIndex" class="form-control" style="width:100px;"
                                data-content="数据展示的坐标，数据的值显示的坐标轴" data-trigger="manual"
                                data-placement="bottom">
                            <option value="0">X1</option>
                            <option value="1">X2</option>
                        </select>
                    </td>
                    <td class="setting-control-label">使用Y轴</td>
                    <td>
                        <select name="yAxisIndex" class="form-control" style="width:100px;"
                                data-content="数据展示的坐标，数据的值显示的坐标轴" data-trigger="manual"
                                data-placement="bottom">
                            <option value="0">Y1</option>
                            <option value="1">Y2</option>
                        </select>
                    </td>
                    <td>
                        <a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </script>
</div>
